<template>
  <i v-if="!useSvg" :class="classes" :style="styles" @click="handleClick">
  </i>
  <svg v-else class="sh-svg-icon" aria-hidden="true">
    <use :xlink:href="'#' + type"></use>
  </svg>
</template>

<script>
const prefixCls = 'iconfont'
export default {
  name: 'Icon',
  props: {
    fontFamily: {
      type: String
    },
    type: {
      type: String,
      default: ''
    },
    useSvg: { // 使用svg即可支持彩色图标
      type: Boolean,
      default: false
    },
    size: [Number, String],
    color: String
  },
  data () {
    return {

    }
  },
  computed: {
    classes () {
      return [
        this.fontFamily || prefixCls,
        {
          [`${this.type}`]: this.type !== ''
        }
      ]
    },
    styles () {
      let style = {}

      if (this.size) {
        style['font-size'] = `${this.size}px`
      }

      if (this.color) {
        style.color = this.color
      }

      return style
    }
  },
  methods: {
    handleClick (event) {
      this.$emit('click', event)
    }
  }
}
</script>
